<template>
    <view class="floater">
        <view class="back-top btn" :class="{'show':show}" @click="clickBtn"></view>
    </view>
</template>

<script>
    const app = getApp();
    export default {
        props: {
            //是否禁用拖动
            show: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {};
        },

        mounted() {},
        methods: {
            //点击按钮
            clickBtn() {
                
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });


            }
        }
    };
</script>

<style scoped lang="scss">
    .floater{
        position: fixed;
        right: 12px;
        bottom: 47px;
        z-index: 2;
        .btn {
            position: relative;
            margin-top: 10px;
            width: 44px;
            height: 44px;
            background-position: 50%;
            background-repeat: no-repeat;
            background-color: #fff;
            background-size: 22px;
            border-radius: 50%;
            border: 1px solid rgba(26, 35, 37, 0.1);
            box-shadow: 0px 2px 11px 0px rgba(26, 35, 37, 0.2);
            cursor: pointer;
        }
        .back-top{
            background-position: center 55%;
            background-size: 18px;
            background-image: url('/static/images/toTop.png');
            display: none;
        }
        .show{
            -webkit-animation: circle .5s linear 1;
            animation: circle .5s linear 1;
            opacity: .9;
            display: block;
        }
    }
    @keyframes circle {
        0% {
            opacity:0;
        }
        100% {
            opacity: .9;
        }
    }
</style>
